<script setup lang="ts">
import { baseToolsStore } from '@/stores/baseTools'
import { headersStore } from '@/stores/apiHeader'
import HumanBar from '@/components/Echart/Bar/HumanBar.vue'
import { reactive, computed, watch } from 'vue'
import * as echarts from 'echarts'
import { storeToRefs } from 'pinia'
import { useHumanStore } from '@/stores/module/human'
import { useDialogStore } from '@/stores/dialog'
import {
  DEFAULT_ECHARTS_FONTSIZE,
  DIALOG_ECHARTS_FONTSIZE,
} from '@/Utils/setting'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore

const fontSize = dialogInfo.visible
  ? DIALOG_ECHARTS_FONTSIZE
  : DEFAULT_ECHARTS_FONTSIZE
const dialogInfoVisible = dialogInfo.visible
// import { isMobile } from '@/Utils/global'
const HumanStore = useHumanStore() // 创建store实例
const { getPerformance }: any = storeToRefs(HumanStore)
// 调整px到合适的大小
const changePixelSize = (px: number) => {
  // 获取当前屏幕宽度
  const width = document.body.clientWidth
  let res = (px / 1920) * width
  // 保留整数
  return parseInt(res.toFixed(0))
}
const isDepartment = computed(() => baseToolsStore().isDepartment) //是否是部门
// 是否为集团总部
const isHeadquarters = computed(() => {
  return headersStore().scope_code === '0000100001'
})
const itemStyles = [
  [
    { offset: 0, color: '#4153D3' },
    // { offset: 0.3, color: '#5640e2' },
    // { offset: 1, color: '#0abafe' },
  ],
  [
    { offset: 0, color: '#34FEAF' },
    // { offset: 0.3, color: '#18A86B' },
    // { offset: 1, color: '#52DBA9' },
  ],
  [
    { offset: 0, color: '#CC5F30' },
    // { offset: 0.3, color: '#EDA141' },
    // { offset: 1, color: '#CDB18B' },
  ],
  [
    { offset: 0, color: '#E067E3' },
    // { offset: 0.3, color: '#EDA141' },
    // { offset: 1, color: '#CDB18B' },
  ],
  [
    { offset: 0, color: '#FADD69' },
    // { offset: 0.3, color: '#EDA141' },
    // { offset: 1, color: '#CDB18B' },
  ],
]
// 数值转级别
const numToLevel = (val) => {
  switch (val) {
    case 0:
      return 'D'
      break
    case 1:
      return 'C'
      break
    case 2:
      return 'B'
      break
    case 3:
      return 'B+'
      break
    case 4:
      return 'A'
      break
    default:
      break
  }
}
const legendData = getPerformance.value.info?.map((item) => {
  return item.name
})
const series = computed(() =>
  getPerformance.value.info?.map((item, index) => {
    return {
      type: 'bar',
      name: item.name,
      barWidth:
        getPerformance.value.info.length == 1
          ? changePixelSize(26)
          : changePixelSize(10),
      data: item.data,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          1,
          0,
          0,
          itemStyles[index]
        ),
      },
      emphasis: {
        focus: 'series',
        label: {
          show: true,
          position: 'top',
          formatter: function (val) {
            return numToLevel(Number(val.data))
          },
          fontSize: changePixelSize(fontSize),
          color: '#F18337',
        },
      },
      tooltip: {
        valueFormatter: function (val) {
          return numToLevel(Number(val))
        },
      },
    }
  })
)

//echarts配置项
const chartData = computed(() => {
  return {
    name: 'KeyExpenditureComparison',

    stack: 'total',
    legend: {
      top: '2%',
      data: legendData.length > 1 ? legendData : [],
      itemWidth: changePixelSize(10),
      itemHeight: changePixelSize(10),
      textStyle: {
        fontSize: changePixelSize(fontSize),

        color: '#fff',
      },
      type: 'scroll',
      pageIconColor: '#00f9f5',
      pageIconSize: changePixelSize(fontSize),
      pageTextStyle: {
        color: '#fff',
      },
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '5%',
      top: '20%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: getPerformance.value.sub_titles,
      axisTick: {
        show: false, // 关闭刻度线
      },
      axisLine: {
        show: false, // 关闭轴线
      },
      axisLabel: {
        color: '#fff', // 设置 X 轴标签字体颜色
        fontSize: changePixelSize(fontSize),
        interval: 0, // 强制显示所有标签
        margin: changePixelSize(5), // 调整标签与轴线的距离
        formatter:
          dialogInfoVisible == false
            ? function (str: any) {
                // 中文算2,英文算1,数到maxLength截取,然后打...
                let count = 0
                let result = ''

                for (let i = 0; i < str.length; i++) {
                  const char = str.charAt(i)
                  count += /[\u4E00-\u9FA5]/g.test(char) ? 2 : 1

                  if (count > 8) {
                    result += '...'
                    break
                  }

                  result += char
                }
                return result
              }
            : function (str: any) {
                // 中文算2,英文算1,数到maxLength截取,然后打...
                let count = 0
                let result = ''

                for (let i = 0; i < str.length; i++) {
                  const char = str.charAt(i)
                  count += /[\u4E00-\u9FA5]/g.test(char) ? 1 : 1

                  if (count > 8) {
                    result += '...'
                    break
                  }

                  result += char
                }
                return result
              },
      },
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 4,
      splitLine: {
        lineStyle: {
          color: '#123545', // 分割线颜色为灰色
        },
      },
      axisLabel: {
        formatter: (val, index) => {
          return numToLevel(val)
        }, // 将数值转化为百分比格式显示
        fontSize: changePixelSize(fontSize),
        color: '#08ffff',
        margin: changePixelSize(5), // 调整标签与轴线的距离
      },
    },

    series: series.value,
    // [
    //   {
    //     type: 'bar',
    //     name: '2022年4月',
    //     barWidth: changePixelSize(16),
    //     data: getPerformance.value.info,
    //     emphasis: {
    //       focus: 'series',
    //     },
    //     itemStyle: {
    //       color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    //         { offset: 0, color: '#5640e2' },
    //         { offset: 0.3, color: '#5640e2' },
    //         { offset: 1, color: '#0abafe' },
    //       ]),
    //     },
    //     label: {
    //       show: true,
    //       position: 'top',
    //       formatter: '{c}%', // 将数值转化为百分比格式显示
    //       fontSize: changePixelSize(12),
    //       color: '#F18337',
    //     },
    //   },
    //   {
    //     type: 'bar',
    //     name: '2023年4月',
    //     barWidth: changePixelSize(16),
    //     data: [120, 132, 101, 134, 90],
    //     emphasis: {
    //       focus: 'series',
    //     },
    //     itemStyle: {
    //       color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    //         { offset: 0, color: '#18A86B' },
    //         { offset: 0.3, color: '#18A86B' },
    //         { offset: 1, color: '#52DBA9' },
    //       ]),
    //     },
    //     label: {
    //       show: true,
    //       position: 'top',
    //       formatter: '{c}%', // 将数值转化为百分比格式显示
    //       fontSize: changePixelSize(12),
    //       color: '#F18337',
    //     },
    //   },
    //   {
    //     type: 'bar',
    //     name: '2023年3月',
    //     barWidth: changePixelSize(16),
    //     data: [220, 182, 191, 234, 290],
    //     emphasis: {
    //       focus: 'series',
    //     },
    //     itemStyle: {
    //       color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    //         { offset: 0, color: '#EDA141' },
    //         { offset: 0.3, color: '#EDA141' },
    //         { offset: 1, color: '#CDB18B' },
    //       ]),
    //     },
    //     label: {
    //       show: true,
    //       position: 'top',
    //       formatter: '{c}%', // 将数值转化为百分比格式显示
    //       fontSize: changePixelSize(12),
    //       color: '#F18337',
    //     },
    //   },
    // ],
  }
})
watch(
  () => getPerformance.value,
  () => {
    chartData.value.series = series.value
    chartData.value.xAxis.data = getPerformance.value.sub_titles
  },
  { deep: true }
)
</script>

<template>
  <card-box componentName="KeyExpenditureComparison">
    <template v-slot:title v-if="getPerformance.title">
      <h1
        :class="{
          subtitle: dialogInfoVisible,
        }"
      >
        {{ getPerformance.title }}
      </h1>
    </template>
    <HumanBar :chart-data="chartData" v-if="getPerformance.info?.length" />
    <div v-else class="default-img">
      <p>
        {{
          !isDepartment && !isHeadquarters ? $t('bi_common_nodata') : '暂无数据'
        }}
      </p>
    </div>
  </card-box>
</template>
<style lang="scss" scoped>
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;

  font-size: 16px;
  color: #00f6ff;
}
.subtitle {
  font-size: 30px;
}
</style>
